<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <title>百院书评网</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet"
          href="/assets/vant/index.css"/>

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="/assets/vue/vue.global.js"></script>
    <script src="/assets/vant/vant.min.js"></script>
    <script src="/assets/axios/axios.js"></script>
</head>
<body>
<div id="app">
    <van-nav-bar right-text="会员登录" @click-right="directLogin">
        <template #left>
            <a href="/" style="padding-top: 10px">
                <img src="/images/logo2.png" style="width: 80px">
            </a>
        </template>
    </van-nav-bar>

    <van-row justify="center">
        <van-col span="12">
    <h3 style="padding-left:32px">会员注册</h3>
        </van-col>
    </van-row>
    <!-- 注册表单 -->
    <van-form ref="registerForm">
        <!--用户名-->
        <van-cell-group inset>
            <van-field
                    v-model="username"
                    name="用户名"
                    label="用户名"
                    autocomplete="off"
                    placeholder="请输入用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
            />
        </van-cell-group>
        <!--密码-->
        <van-cell-group inset>
            <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />
        </van-cell-group>
        <!--昵称-->
        <van-cell-group inset>
            <van-field
                    v-model="nickname"
                    name="nickname"
                    label="昵称"
                    autocomplete="off"
                    placeholder="请输入昵称"
                    :rules="[{ required: true, message: '请填写昵称' }]"
            />
        </van-cell-group>
        <!--验证码-->
        <van-cell-group inset>
            <van-row>
                <van-col span="16">
                    <van-field
                            v-model="verifyCode"
                            name="verifyCode"
                            label="验证码"
                            placeholder="请输入验证码"
                            autocomplete="off"
                            :rules="[{ required: true, message: '请填写验证码' }]"
                    />
                </van-col>
                <!--验证码的图片-->
                <van-col span="8">
                    <img id="imgVerifyCode" src="/verify_code"
                         style="width: 100%;height:44px;cursor: pointer" @click="reloadVerifyCode">
                </van-col>
            </van-row>
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" @click="onSubmit('registerForm')">
                注册会员
            </van-button>
        </div>
    </van-form>
</div>
<script>

    const Main = {
        data() {
            return {
                username: "", //用户名
                password: "", //密码
                nickname:"", //昵称
                verifyCode: "" //验证码
            }
        }
        , methods: {
            //注册表单提交方法
            onSubmit: function (formName) {
                //获取到当前的表单对象
                const form = this.$refs[formName];
                const objApp = this;
                /*先进行表单校验，成功后才发起请求*/
                form.validate().then(function(){
                    /*实例化参数对象*/
                        const params = new URLSearchParams();
                        params.append("username", objApp.username);
                        params.append("password", objApp.password);
                        params.append("nickname", objApp.nickname);
                        params.append("vc", objApp.verifyCode);
                        /*向服务器发起请求*/
                        axios.post("/member/register" , params).then(function(response){
                                const json = response.data;
                                if(json.code == "10000"){
                                    //正确响应后的处理。。。
                                    vant.Dialog.alert({
                                        title:"注册成功",
                                        message:"确认后跳转到登录页面"
                                    }).then(function (){
                                        window.location.href="/login.html";
                                    })

                                }else {
                                    /*每错误提交一次，刷新一下验证码*/
                                    objApp.reloadVerifyCode();

                                    //调用vant的弹窗提示
                                    vant.Dialog.alert({
                                        title:"注册失败",
                                        message:json.msg
                                    });
                                    console.error(json);
                                }
                            })
                    })
                    .catch(function(e){
                        console.error(e);
                    })
            }
            , directLogin: function () { //跳转到登录页方法
                window.location.href = "/login.html";
            }
            , reloadVerifyCode: function () { //刷新验证码方案
                /*获取得到表单的验证码的元素，重新请求，加上？。。。来区别不同的请求*/
                document.getElementById("imgVerifyCode").src = "/verify_code?ts=" + new Date().getTime();
            }
        }
    };
    const app = Vue.createApp(Main);
    app.use(vant);
    app.use(vant.Lazyload);
    app.mount("#app");
</script>
</body>
</html>